// 获取元素  
var banner = document.querySelector('.banner');
var imgBox = document.querySelector('.imgBox'); // ul 
var pointBox = document.querySelector('.pointBox'); // ol
// 获取元素的尺寸 
// client 元素.clientWidth     内容+内边距
// offset 元素.offsetWidth     内容+内边距+边框 
const banner_width = banner.clientWidth;
let  index = 1;  // 当前第几张
let ti = 0; // 定时器 
let flag = true; // 开关  
// 因为自动轮播 多个定时器开启  如果点击向左 向右  按钮 又要执行运动函数 
// 为了同一时刻  只能一个运动函数执行 

// 实现  无限循环模式  
// 如何实现?  在第一张左边 添加 最后一张  最后一张右边 添加第一张 
copyEle();
function copyEle(){
    //元素.cloneNode(参数) false 只复制第一级  true 克隆后代
    // 元素.firstElementChild 第一个子元素节点
    // 元素.lastElementChild  最后一个子元素节点  
    const first = imgBox.firstElementChild.cloneNode(true);
    const last = imgBox.lastElementChild.cloneNode(true);
    // 将克隆好的元素 插入到ul中  
    // first 插入到 ul子元素列表的末尾  父元素.appendChild(子元素)
    // last 插入到 ul第一个子元素的前面  父元素.insertBefore(子元素,谁的前面)
    imgBox.appendChild(first);
    imgBox.insertBefore(last,imgBox.firstElementChild);

    // 根据 li的个数 调整 ul imgBox的宽度  
    // 原来 5个图片  imgBox的宽度 500% 
    // 现在 7个  
    //  imgBox的宽度 700% 
    // 一个图片 100% 
    imgBox.style.width = imgBox.children.length * 100 + '%';
    // 1   第一张   走一格
    // 2   第二章   走两格

    imgBox.style.left = -index*banner_width+'px'


}


// 生成焦点 
// ul 中 有七个li  但是 第一个li  和最后一个都是假的
// 所以应该生成五个焦点 
// 创建li 插入到 ol中 
// 高亮  给 ol的li 添加class="active"
setPoint()
function  setPoint(){
   const pointNum =  imgBox.children.length - 2;

   for(var i=0;i<pointNum;i++){
        const li = document.createElement('li');
        li.classList.add('item'); // 为了方便后期获取事件目标
        // 为了清楚直到 按钮对应哪一张图片 
        // 将其编号
        li.dataset.point = i;
        if(i==0){
            li.classList.add('active');
        }
        pointBox.appendChild(li);
   }
}


// 自动轮播  
//  7个li  
// 0  假的最后一张 
// 1    第一张
// 2    第二张
// 3    第三张
// 4    第四张
// 5    第五张
// 6  假的第一张 

//当前    1    -600
//1秒后   2    -1200 
//2秒后   3    -1800
//3秒后  4    -2400
//2秒后  5    -3000
autoplay()
function autoplay(){
    ti = setInterval(()=>{
        index++
        move3(imgBox,{left:-index * banner_width},20,moveEnd)
    },2000);
}
//  运动函数结束以后做的事情
function moveEnd(){
    // 如果到最后一页 
    if(index === imgBox.children.length-1){
        index = 1;
        imgBox.style.left = -index*banner_width+'px'
    }


    // 如果第一页 向左 
    // if(index ==0){
    //     index = 
    // }

    if(index === imgBox.children.length-1){
        index = 1;
        imgBox.style.left = -index*banner_width+'px';
    }
    // 第一张向左   来到假的最后一张  跳到真最后哪一张  
    if(index === 0){
        index = imgBox.children.length -2;
        imgBox.style.left = -index * banner_width + 'px';
    }

    for(let j=0;j<pointBox.children.length;j++){
        pointBox.children[j].classList.remove('active')
    }

    pointBox.children[index - 1].classList.add('active');

    flag = true; // 运动函数结束 flag 打开 其它运动函数执行 

    
}
// 移入停止轮播
moveover()
function moveover(){
    banner.addEventListener('mouseover',()=>{clearInterval(ti)})
}
moveout();
// 移出继续轮播 
function moveout(){
    banner.addEventListener('mouseout',()=>{autoplay()})
}

bindEvent();
// 点击事件  
function  bindEvent(){
    banner.onclick = function(e){
        if(e.target.className === 'left'){
            // alert('点的是左边按钮');
            if(flag == false) return;
            // 如果为false 说明 已经有运动函数在执行了 return 

            flag = false; // 走到这说明 没有运动函数执行 
            // 把flag 变成false 目的是 其它运动函数不能执行 
            index--;
            move3(imgBox,{left:-index * banner_width},20,moveEnd)
        }

        if(e.target.className === 'right'){
            // alert('点的是右边按钮');
            if(flag == false) return;
            flag = false;
            index++;
            move3(imgBox,{left:-index * banner_width},20,moveEnd)
        }


        if(e.target.className === 'item'){
            // alert('点的是圆摁钮');
            if(flag == false) return;
            flag = false;
            index = e.target.dataset.point - 0 + 1;
            move3(imgBox,{left:-index * banner_width},20,moveEnd)
        }
    
    }
}
